<template>
	<view class="detail-container-box">
		<!-- 顶部法官信息区域 -->
		<view class="user-info-box">
			<view class="user-item user-name">冯静</view>
			<view class="user-item">
				所属机构：
				<text class="item-text">上海市浦东新区人民法院</text>
			</view>
			<view class="user-item">
				办公电话：
				<text class="item-text">13155667788</text>
			</view>
			<view class="user-item">
				办公地点：
				<text class="item-text">上海市浦东新区黄埔大道010号</text>
			</view>
		</view>
		<!-- 中间法官办理过的案件区域 -->
		<view class="case-box">
			<view class="case-title">办理过的案件</view>
			<block v-for="caseItem in ceseDataList" :key="caseItem.id">
				<view class="case-item" @click="caseItemClick(caseItem.id)">
					<view class="case-type item-text">{{ caseItem.case_type }}</view>
					<view class="case-number">共 {{ caseItem.case_number }} 条案例</view>
					<u-icon class="icon-right" name="arrow-right"></u-icon>
				</view>
			</block>
		</view>
		<!-- 底部法官判决统计图区域 -->
		<view class="case-box">
			<view class="case-title">法官判决统计</view>
			<!-- 装柱状图的盒子 -->
			<view class="case-chart">
				<histogram-chart :dataAs="histogramData" width="750" height="480" :basicAs="basicAs" :yAxisAs="yAxisAs" :legendAs="legendAs" />
				<!-- X 坐标的文字：通过插槽的形式完善 -->
				<view class="slot-content">
					<view class="item-box" v-for="(item, index) in histogramData.categories" :key="index">{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入柱状图组件
import HistogramChart from '@/myPackageA/components/stan-ucharts/ArcbarChart.vue';
export default {
	// 注册组件
	components: {HistogramChart},
	data() {
		return {
			// 办理过的案件数据列表
			ceseDataList: [
				{
					id: 1,
					case_type: '民事案件',
					case_number: 2
				},
				{
					id: 2,
					case_type: '刑事案件',
					case_number: 3
				}
			],
			// 柱状图中的数据
			histogramData: {
				// X 坐标的刻度列表数据
				categories: ['侵权责任纠纷', '执行案件', '赔偿案件', '知识产权', '行政案件', '刑事案件', '民事案件'],
				series: [
					{
						name: '成功/件', //数据名称
						data: [0, 1, 0, 2, 0, 0, 1],
						show: true, //图形显示状态，配合点击图例显示状态，也可默认指定是否显示
						color: '#037EFA', //	图形颜色 不传入则使用系统默认配色方案 即统一柱状图颜色
						textSize: 12 ,//图形上方标注文字的字体大小
						legendShape: 'square',	// 图例图标的形状
					},
					{
						name: '驳回/件',
						data: [0, 0, 1, 0, 1, 0, 0],
						color: '#FE0000',
						show: true, //图形显示状态，配合点击图例显示状态，也可默认指定是否显示
						textSize: 12 ,//图形上方标注文字的字体大小
						legendShape: 'square',	// 图例图标的形状
					}
				]
			}
		};
	},
	onLoad(options) {
		// 根据用户传递的参数动态设置页面标题
		uni.setNavigationBarTitle({
			title: options.title + '信息'
		});
		// this.searchPlaceholder = options.text;
		// this.tipWord = this.searchPlaceholder.replace('搜', '').trim();
	},
	methods: {
		// 案件项的点击事件
		caseItemClick(id) {
			// 携参跳转到案件查找页
			this.$u.route({
				type: 'to', // 跳转方式
				url: '/myPackageA/pages/views/search-case', // 案件查找页的路径
				params: {
					// 所需携带的参数对象
					id: id
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-container-box {
	min-height: 100vh;
	background-color: #e5e5e5;
	padding-top: 15rpx;
	font-family: PingFang SC;
	.user-info-box {
		box-sizing: border-box;
		padding: 0 22rpx;
		background-color: #ffffff;
		.user-item {
			line-height: 88rpx;
			font-size: 30rpx;
			color: #5f5f6b;
			border-bottom: 1rpx solid #e5e5e5;
		}
		.user-name {
			box-sizing: border-box;
			font-size: 34rpx;
			color: #000000;
			font-weight: 700;
		}
	}
	.item-text {
		font-weight: 500;
		font-size: 30rpx;
		color: #141418;
	}
	.case-box {
		.case-title {
			line-height: 88rpx;
			padding: 0 22rpx;
			font-size: 28rpx;
			color: #5f5f6b;
			font-weight: 500;
		}
		.case-item {
			height: 102rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 14rpx 22rpx;
			background-color: white;
			position: relative;
			border-bottom: 1rpx solid #e5e5e5;
			.case-number {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5f5f6b;
			}
			.icon-right {
				position: absolute;
				top: 50%;
				right: 22rpx;
				transform: translateY(-50%);
				color: #e5e5e5;
			}
		}

		// 底部统计图的区域
		.case-chart {
			width: 750rpx;
			background-color: white;
			position: relative;
			overflow: hidden;
			.slot-content {
				width: 100%;
				/* background-color: skyblue; */
				position: absolute;
				top: 351rpx;
				left: 0;
				display: flex;
				padding: 0 28rpx;
			}
			.item-box {
				width: 88rpx;
				text-align: center;
				padding: 0 18rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #141418;
			}
		}
	}
}
</style>
